<template>
  <<div style='padding:18px 0px'>
  <el-row :gutter="24">
    <el-col :span="4" :offset='1'>
      <el-input v-model="pageData.searchText" autocomplete="off" />
    </el-col>
    <el-col :span="1">
      <el-button type="primary" @click='handlerSearch'>查询</el-button>
    </el-col>
    <el-col :span="1">
      <el-button type="primary" @click='addDialogVisible=true'>新增</el-button>
    </el-col>

  </el-row>
</div>

  <el-table :data="pageData.records" style="width: 100%">
<!--    表头-->
    <el-table-column label="产品列表" width="180" background-color:pink>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品id" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.pid }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pid }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="商品名" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.pname }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pname }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="花语" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.meaning }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.meaning }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="商品单价" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.price }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.price }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="商品库存" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.stock }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.stock }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">

    <el-pagination
        v-model:current-page="pageData.current"
        v-model:page-size="pageData.size"
        :page-sizes="[10, 20, 30, 40]"
        :size="pageData.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
<!--  确认删除的对话框-->
  <el-dialog
      v-model="deleteDialogVisible"
      title="提示"
      width="500"
      :before-close="handleClose"
  >
    <span>喂喂喂 你确认吗</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

<!--  新增数据对话框-->
  <el-dialog v-model="addDialogVisible" title="新增" width="500">
    <el-form :model="addObj">
      <el-form-item label="商品id" :label-width="formLabelWidth">
        <el-input v-model="addObj.pid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品名" :label-width="formLabelWidth">
        <el-input v-model="addObj.pname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="花语" :label-width="formLabelWidth">
        <el-input v-model="addObj.meaning" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="单价" :label-width="formLabelWidth">
        <el-input v-model="addObj.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="库存" :label-width="formLabelWidth">
        <el-input v-model="addObj.stock" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handlerAddCancel">取消</el-button>
        <el-button type="primary" @click="handlerAdd">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  编辑数据对话框-->
  <el-dialog v-model="editDialogVisible" title="编辑" width="500">
    <el-form :model="editObj">
      <el-form-item label="商品名" :label-width="formLabelWidth">
        <el-input v-model="editObj.pname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="花语" :label-width="formLabelWidth">
        <el-input v-model="editObj.meaning" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="单价" :label-width="formLabelWidth">
        <el-input v-model="editObj.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="库存" :label-width="formLabelWidth">
        <el-input v-model="editObj.stock" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handlerEditCancel">取消</el-button>
        <el-button type="primary" @click="handlerEditCommit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

    import {ref,onMounted} from "vue"
    import api from '../api'
    import lodash from 'lodash'
    //绑定表格数据
    // const tableData=ref([]);

    const pageData=ref({
      records:[],
      total:0,
      size:10,
      current:1,
      pages:1,
      searchText:''
    });
    const addDialogVisible=ref(false);
    const addObj=ref({
      pid:'',
      pname:'',
      meaning:'',
      price:'',
      stock:''
    })

    const editDialogVisible=ref(false);
    const editObj=ref({
      pid:'',
      name:'',
      meaning:'',
      price:'',
      stock:''
    })

    const handlerSearch=()=>{
      pageData.value.current=1; //从第一页开始查
      getTableList();
    }


    const deleteDialogVisible=ref(false);
    const deleteObj=ref({
      pid:'',
      index:-1,
    });




//组件挂载之后执行的钩子函数
    onMounted( function () {
      // //查询数据，然后将查询到的数据插入（1）
      // const result = await api.getProductList();
      // tableData.value=result;
      //获取表格数据
      getTableList();
    });
    const getTableList=async () => {
      const page={
        current:pageData.value.current,
        size:pageData.value.size,
        searchText:pageData.value.searchText
      };
      if(!page.searchText){
        page.searchText="";
      }
      //传查询的数据，有数据就传，没有就不传

      const result = await api.getProductPage(page);

      pageData.value = result;
      pageData.value.searchText=page.searchText;
    }
    const handlerAddCancel=()=>{
      addObj.value.name="";
      addObj.value.meaning="";
      addDialogVisible.value=false;
    }
    const handlerAdd=async ()=>{
      await api.addProduct(addObj.value);
      getTableList();
      addDialogVisible.value=false;
    }

    const handleEdit = (index, row) => {
      //打开对话框
      editDialogVisible.value=true;
      //绑定数据
     editObj.value=lodash.clone(row);

}
const handlerEditCancel=()=>{
      editDialogVisible.value=false; //点击取消
}
const handlerEditCommit=async () => {
  await api.editProduct(editObj.value);
  getTableList();
  editDialogVisible.value=false;
}

const handleDelete =  (index, row) => {
  deleteObj.value.id=row.pid;
  deleteObj.value.index=index;
  deleteDialogVisible.value=true;
}
const confirmDelete=async ()=>{
  await api.deleteProduct(deleteObj.value.id);
  // pageData.value.records.splice(deleteObj.value.index,1);
  //删除后重新加载
  getTableList();
  deleteDialogVisible.value=false;
    }

//改变分页行数执行的方法
const handleSizeChange = (val) => {
      pageData.value.size=val;
      getTableList();
}
//改变当前页码执行的方法
const handleCurrentChange = (val) => {
      pageData.value.current=val;
      getTableList();
}


</script>